<template>
  <div class="article_content_wrap">
    <div class="article_content_header">
      <!-- 文章 title -->
      <div class="header_pic">
        <img src="@/assets/icon/ikaros_article.jpg" alt="伊卡洛斯画报" />
      </div>

      <!-- 文章描述 -->
      <div class="article_desc">
        <span style="float: left">总第 {{ articleDetail.idNo }} 期</span>
        <span style="float: right"
          >本期阅读约需 {{ articleDetail.readingTime }} 分钟</span
        >
      </div>

      <!-- 文章主要内容 -->
      <article id="single" class="article_start item episodes single-page">
        <div class="inner">
          <div class="item-main">
            <h1>
              <span class="h1-ep"> {{ articleDetail.idNo }} </span
              ><a class="processed"> {{ articleDetail.title }} </a>
            </h1>
            <div class="item-desc text">
              <div v-for="(item, index) in contentArr" :key="index">
                <p>{{ item }}</p>
                <br />
              </div>
              <br />
              <span class="module contents"><h2>本期作品：</h2></span>
              <viewer class="pic-box" :images="picArr" :options="viewOptions">
                <div v-for="(src, index) in picArr" :key="index">
                  <img :src="src" :data-source="src.replace(/.md/g, '')" />
                </div>
              </viewer>
            </div>
          </div>
          <aside>
            <div class="aside-block aside-meta aside-tags">
              <div class="tags" style="display: block">
                <h5>内容主题</h5>
                <div v-for="(tg, tgIndex) in articleDetail.tags" :key="tgIndex">
                  <a :title="'查看更多关于「' + tg + '」的内容'"
                    ><em>#</em>{{ tg }}</a
                  >
                </div>
              </div>
            </div>

            <div class="aside-block aside-meta aside-duration">
              <h5>浏览时长</h5>
              {{ articleDetail.readingTime }}<span class="pg"> </span>分钟
            </div>

            <div class="aside-block aside-meta aside-hosts">
              <h5>本期作者</h5>
              <span class="item-text item-meta-hosts processed">Ikaros</span>
            </div>

            <div class="aside-block aside-date">
              <h5>发布时间</h5>
              {{ articleDetail.publishTime }}<span class="pg"> </span>
            </div>
          </aside>
        </div>
      </article>

      <!-- 文章评论 -->
      <Comment :postId="$route.query.id"></Comment>

      <!-- 文章结束语 -->
      <div class="article_end">- The End -</div>
      <div class="article_info">
        <span style="float: left">创刊于二〇二一年八月</span>
        <span style="float: right">IKAROS.PM 旗下产品</span>
      </div>
    </div>
    <div class="article_content_footer">
      收件地址：
      <a href="mailto:ikarosyu@163.com" target="_blank">*|EMAIL|*</a>
      <br />
      <a href="*|ABOUT_LIST|*" target="_blank">关于伊卡洛斯画报</a>
      · <a href="*|UNSUB|*">取消订阅</a> ·
      <a href="*|UPDATE_PROFILE|*">更新订阅选项</a>
      <br />
      *|LIST:ADDRESSLINE|*
    </div>
  </div>
</template>

<script src="./article_content.js"></script>

<style lang="less" scoped>
@import "./article_content.less";
</style>
